﻿@{
    ViewBag.Title = "Home Page";
}

<form style="margin-top:20px;">
    <div class="form-group">
        <label>名字</label>
        <input type="text" class="form-control" id="name" value="Emrys">
    </div>

    <div class="form-group">
        <label>年龄</label>
        <input type="text" class="form-control" value="26" id="age">
    </div>

    <div class="form-group">
        <label>爱好</label>
        <div id="bobbys">
            <label class="checkbox-inline">
                <input type="checkbox" value="足球" checked="checked"> 足球
            </label>
            <label class="checkbox-inline">
                <input type="checkbox" value="篮球"> 篮球
            </label>
            <label class="checkbox-inline">
                <input type="checkbox" value="电影" checked="checked"> 电影
            </label>
            <label class="checkbox-inline">
                <input type="checkbox" value="小说"> 小说
            </label>
            <label class="checkbox-inline">
                <input type="checkbox" value="音乐"> 音乐
            </label>
        </div>
    </div>
    <div class="form-group">
        <label>所在公司</label>
        <input type="text" class="form-control" id="company-name" value="上海xxxxxx公司">
        <input type="text" class="form-control" id="company-address" value="上海徐汇区xxxx路">
        <input type="text" class="form-control company-tel" value="021-88888881">
        <input type="text" class="form-control company-tel" value="021-88888882">
        <input type="text" class="form-control company-tel" value="021-88888883">
        <input type="text" class="form-control company-tel" value="021-88888884">
    </div>

    <div class="form-group">
        <label>喜欢明星</label>
        <div class="row" id="star">
            <div class="col-md-4">
                <div class="item-star">
                    <input type="text" class="form-control name" placeholder="名字" value="成龙">
                    <input type="text" class="form-control age" placeholder="年龄" value="63">
                    <input type="text" class="form-control movie" placeholder="作品" value="十二生肖">
                </div>
            </div>
            <div class="col-md-4">
                <div class="item-star">
                    <input type="text" class="form-control name" placeholder="名字" value="刘亦菲">
                    <input type="text" class="form-control age" placeholder="年龄" value="18">
                    <input type="text" class="form-control movie" placeholder="作品" value="功夫之王">
                </div>
            </div>
            <div class="col-md-4">
                <div class="item-star">
                    <input type="text" class="form-control name" placeholder="名字" value="胡歌">
                    <input type="text" class="form-control age" placeholder="年龄" value="24">
                    <input type="text" class="form-control movie" placeholder="作品" value="琅琊榜">
                </div>
            </div>
        </div>

    </div>
</form>

<div>
    <button type="button" id="btn-submit">提交测试</button>
</div>





@section scripts{
    <script type="text/javascript">
        $(function () {
            $("#btn-submit").click(function () {
                var data = {};
                var obj = {};
                data.name = $("#name").val();
                data.age = $("#age").val();


                obj.name = $("#name").val();
                obj.age = $("#age").val();

                obj.bobbys = [];
                $("#bobbys input:checkbox:checked").each(function (index) {
                    data["bobbys[" + index + "]"] = $(this).val();
                    obj.bobbys.push($(this).val());
                });

                obj.company = {};
                obj.company.name = $("#company-name").val();
                obj.company.address = $("#company-address").val();
                obj.company.tel = [];

                data["company.name"] = $("#company-name").val();
                data["company.address"] = $("#company-address").val();


                $(".company-tel").each(function (index) {
                    data["company.tel[" + index + "]"] = $(this).val();
                    obj.company.tel.push($(this).val());
                });

                obj.star = [];

                $("#star .item-star").each(function (index) {
                    data["star[" + index + "].name"] = $(this).find(".name").val();
                    data["star[" + index + "].age"] = $(this).find(".age").val();
                    data["star[" + index + "].movie"] = $(this).find(".movie").val();

                    obj.star.push({
                        "name": $(this).find(".name").val(),
                        "age": $(this).find(".age").val(),
                        "movie": $(this).find(".movie").val()
                    });
                });

                $.ajax({
                    url: "/",
                    type: "post",
                    data: data,
                    success: function (r) {
                        console.log("-------data----------");
                        console.log(r);
                    }
                });

                $.ajax({
                    url: "/",
                    type: "post",
                    data: obj,
                    success: function (r) {
                        console.log(r);
                    }
                });
                $.ajax({
                    url: "/",
                    type: "post",
                    data: {
                        "name": "Emrys",
                        "age": "26",
                        "bobbys": ["足球", "电影"],
                        "company": {
                            "name": "上海xxxxxx公司",
                            "address": "上海徐汇区xxxx路",
                            "tel": [
                                "021-88888881",
                                "021-88888882",
                                "021-88888883",
                                "021-88888884"
                            ]
                        },
                        "star": [
                            { "name": "成龙", "age": "63", "movie": "十二生肖" },
                            { "name": "刘亦菲", "age": "18", "movie": "功夫之王" },
                            { "name": "胡歌", "age": "24", "movie": "琅琊榜" }
                        ]
                    },
                    success: function (r) {
                        console.log(r);
                    }
                });



                $.ajax({
                    url: "/",
                    type: "post",
                    data: "name=Emrys&age=26&bobbys[0]=足球&star[0].movie=琅琊榜",
                    success: function (r) {
                        console.log(r);
                    }
                });




                var data1 = { name: "Emrys" };
                data1.age = 26;
                data1["bobbys[0]"] = "足球";
                data1["star[0].movie"] = "琅琊榜";

                $.ajax({
                    url: "/",
                    type: "post",
                    data: data1,
                    success: function (r) {
                        console.log("xxxxxxxxxxxxxx");
                        console.log(r);
                    }
                });



                $.ajax({
                    url: "/?contentType",
                    type: "post",
                    contentType: "application/json",
                    data: JSON.stringify(obj),
                    success: function (r) {
                        console.log("xxxxxxxxxxxxxx");
                        console.log(r);
                    }
                });

            });
        });
    </script>

}